<template>
  <img
    :src="url"
    :style="{
      width: size + 'px',
      height: size + 'px',
    }"
    class="avatar-container"
  />
</template>

<script>
export default {
  name: "Avatar",
  props: {
    url: {
      type: String, // 类型为字符串
      required: true, // 这个属性必传
    },
    size: {
      type: Number,
      default: 60,
    },
  },
};

function render(data) {
  console.log(data);
}
</script>

<style scoped lang="less">
/*
加上 scoped 之后所有的类都带有作用域
编译结果为：
.avatar-img[data-v-5811d9ee] {
  border-radius: 30%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

会自动在 带有avatar-img这个类名的元素上加上 data-v-5811d9ee这个属性，

*/
.avatar-container {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
</style>